<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="css/api.css" />
    <link rel="stylesheet" href="css/aui.css" />
    <link rel="stylesheet" href="css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="aui-bar aui-bar-nav" style="background: #fff;">
    <a class="aui-pull-left aui-btn qy-btn" href="#" style="border-right:1px solid #aeaeae;height: 28px;margin-top: 12px;color: #666;font-size: 0.7rem;">
        区域ⅴ
    </a>
    <div class="aui-title community-name" style="right: 3rem;left: 3rem;">青龙区社区周边</div>
</header>
<div id="aui-slide3">
    <div class="aui-slide-wrap" >
        <div class="aui-slide-node bg-dark">
            <img src="./image/banner.jpg" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="./image/banner.jpg" />
        </div>
        <div class="aui-slide-node bg-dark">
            <img src="./image/banner.jpg" />
        </div>
    </div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>
<section class="sec-nav aui-grid aui-margin-b-15" style="margin-bottom: 0 !important;">
    <div class="aui-row">
        <a href="tel.html" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav1.png" alt="">
            <div class="aui-grid-label">便民电话</div>
        </a>
        <a href="service.html" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav2.png" alt="">
            <div class="aui-grid-label">便民服务</div>
        </a>
        <a href="cheap.html" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav3.png" alt="">
            <div class="aui-grid-label">附近捡趴活</div>
        </a>
        <a href="#" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav4.png" alt="">
            <div class="aui-grid-label">社区活动</div>
        </a>
        <a href="post.html" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav5.png" alt="">
            <div class="aui-grid-label">免费发帖</div>
        </a>
        <a href="notice.html" class="aui-col-xs-4" style="padding: 0.5rem;">
            <img src="image/nav6.png" alt="">
            <div class="aui-grid-label">重要通知</div>
        </a>
    </div>
</section>
<div class="two-nav">
	<div class="content aui-row">
		<a class="two-nav-a aui-col-xs-6" href="#">
			<div class="aui-row">
				<div class="left aui-col-xs-8">
					<p class="p1"><span>物业服务</span>热线</p>
					<p class="p2">物业咨询热线</p>
				</div>
				<div class="right aui-col-xs-4">
					<img src="image/rex1.png" alt="">
				</div>
			</div>
		</a>
		<a class="two-nav-a aui-col-xs-6" href="#">
			<div class="aui-row">
				<div class="left aui-col-xs-8">
					<p class="p1"><span>教育</span>培训</p>
					<p class="p2">等你来咨询</p>
				</div>
				<div class="right aui-col-xs-4">
					<img src="image/rex2.png" alt="">
				</div>
			</div>
		</a>
		
	</div>
	<div class="content aui-row">
		<a class="two-nav-a aui-col-xs-6" href="#">
			<div class="aui-row">
				<div class="left aui-col-xs-8">
					<p class="p1"><span>开锁</span>疏通</p>
					<p class="p2">为您解决开锁难题</p>
				</div>
				<div class="right aui-col-xs-4">
					<img src="image/rex3.png" alt="">
				</div>
			</div>
		</a>
		<a class="two-nav-a aui-col-xs-6" href="#">
			<div class="aui-row">
				<div class="left aui-col-xs-8">
					<p class="p1"><span>家政</span>服务</p>
					<p class="p2">最好的家政保姆</p>
				</div>
				<div class="right aui-col-xs-4">
					<img src="image/rex4.png" alt="">
				</div>
			</div>
		</a>
		
	</div>
</div>
<div class="hot-box">
	<div class="top">
		<div class="list">
			<a href="#">
			<img src="image/hot.png">
			<span>热</span>
			<div>
				<p class="aui-ellipsis-1">我们的社区服务马上就要上线了1</p>
			</div>
			<span class="more">></span>
		</a>
		<a href="#">
			<img src="image/hot.png">
			<span>热</span>
			<div>
				<p class="aui-ellipsis-1">我们的社区服务马上就要上线了2</p>
			</div>
			<span class="more">></span>
		</a>
		<a href="#">
			<img src="image/hot.png">
			<span>热</span>
			<div>
				<p class="aui-ellipsis-1">我们的社区服务马上就要上线了3</p>
			</div>
			<span class="more">></span>
		</a>
		<a href="#">
			<img src="image/hot.png">
			<span>热</span>
			<div>
				<p class="aui-ellipsis-1">我们的社区服务马上就要上线了撒旦法撒旦法是</p>
			</div>
			<span class="more">></span>
		</a>
		</div>
	</div>
	<div class="down aui-row-padded">
		<a class="down-a aui-col-xs-4 " href="#" title="">
			<img src="image/hot1.jpg" alt="">
			<p class="aui-ellipsis-1">熊孩子坚果</p>
		</a>
		<a class="down-a aui-col-xs-4 " href="#" title="">
			<img src="image/hot2.jpg" alt="">
			<p class="aui-ellipsis-1">大猪蹄，39元包邮</p>
		</a>
		<a class="down-a aui-col-xs-4 " href="#" title="">
			<img src="image/hot3.jpg" alt="">
			<p class="aui-ellipsis-1">加拿大干葡萄酒窖口</p>
		</a>
	</div>

</div>
<div class="p-head">
	<div class="content">
		<span></span><em>最新更新</em><span style="margin-left: 0.3rem;"></span>
		<a href="#" title="">查看更多</a>
	</div>
</div>
<div class="list-content">
	<a class="aui-row-padded" href="cheap-xq.html" title="">
		<div class="aui-col-xs-4 left">
			<img src="image/list1.jpg" alt="">
		</div>
		<div class="aui-col-xs-8 right">
			<p class="txt aui-ellipsis-2">
				<span>【家政服务】</span>月薪过万保洁阿姨传授的清洁妙招，一定要看！
			</p>
			<p class="date">2017-03-22　查看详情</p>
		</div>
	</a>
	<a class="aui-row-padded" href="cheap-xq.html" title="">
		<div class="aui-col-xs-4 left">
			<img src="image/list2.jpg" alt="">
		</div>
		<div class="aui-col-xs-8 right">
			<p class="txt aui-ellipsis-2">
				<span>【家政服务】</span>月薪过万保洁阿姨传授的清洁妙招，一定要看！
			</p>
			<p class="date">2017-03-22　查看详情</p>
		</div>
	</a>
	<a class="aui-row-padded" href="cheap-xq.html" title="">
		<div class="aui-col-xs-4 left">
			<img src="image/list1.jpg" alt="">
		</div>
		<div class="aui-col-xs-8 right">
			<p class="txt aui-ellipsis-2">
				<span>【家政服务】</span>月薪过万保洁阿姨传授的清洁妙招，一定要看！
			</p>
			<p class="date">2017-03-22查看详情</p>
		</div>
	</a>
</div>
<div style="width: 100%;height: 3.5rem;background: #eceef3;"></div>
<footer class="aui-bar aui-bar-tab" id="footer">
    <a href="index.html" class="ft-act aui-bar-tab-item aui-active" tapmode>
        <div class="img">
        </div>
        <div class="aui-bar-tab-label">首页</div>
    </a>
    <a href="72.html" class="aui-bar-tab-item" tapmode>
        <div class="img">
        </div>
        <div class="aui-bar-tab-label">72实体店</div>
    </a>
    <a href="contact.html" class="aui-bar-tab-item" tapmode>
        <div class="img">
        </div>
        <div class="aui-bar-tab-label">联系我们</div>
    </a>
</footer>
<div class="tcc" style="display: none;">
	<form action="" method="get" accept-charset="utf-8">
	<div class="ss" style="width: 80%;height: 10rem;background: #fff;margin: auto;margin-top: 4rem;">
		<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-form-list">
        
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-label">
                   选择社区
                </div>
                <div class="aui-list-item-input">
                    <select>
                        <option>青龙社区1</option>
                        <option>青龙社区2</option>
                        <option>青龙社区3</option>
                        <option>青龙社区1</option>
                        <option>青龙社区2</option>
                        <option>青龙社区3</option>
                        <option>青龙社区1</option>
                        <option>青龙社区2</option>
                        <option>青龙社区3</option>
                        <option>青龙社区1</option>
                        <option>青龙社区2</option>
                        <option>青龙社区3</option>
                        <option>青龙社区1</option>
                        <option>青龙社区2</option>
                        <option>青龙社区3</option>
                    </select>
                </div>
            </div>
        </li>
    </ul>
    </div>
    <div class="cl">
    	取消
    </div>
    <a class="que" href="#">确定</a>
	</div>
	</form>
</div>
</body>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/aui-slide.js"></script>
<script type="text/javascript" src="script/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    

        
        
        var slide = new auiSlide({
    container:document.getElementById("aui-slide3"), //容器
    // "width":300, //宽度
    "height":180, //高度
    "speed":500, //速度
    "autoPlay": 3000, //自动播放
    "loop":true,//是否循环
    "pageShow":true,//是否显示分页器
    "pageStyle":'line', //分页器样式，分dot,line
    'dotPosition':'center' //当分页器样式为dot时控制分页器位置，left,center,right
})

var ygd = 2;
var index = 0;
     function gundong(){
       
        var gs = $(".hot-box .top .list a").length;
        var cd = gs-2;
        if (index==cd) {
            ygd = 0;index = 0;
        }else{ygd+=2;index+=1;}

        $(".hot-box .top .list").css("margin-top","-"+ygd+"rem");

     }

     setInterval("gundong()", 3000);
$('.qy-btn').click(function(){
	$('.tcc').css('display','block');

});
	$('.cl').click(function(){
	$('.tcc').css('display','none');

});	
	$('.que').click(function(){
	$('.tcc').css('display','none');

});	
    
</script>
</html>